<template>
  <el-dialog
    @closed="handleDialogClose"
    v-model="props.tradeInformationOpen"
    title="交易记录"
  >
    <el-table :data="tableData" style="height: 50vh">
      <el-table-column prop="orderId" label="订单ID" width="150"/>
      <el-table-column prop="username" label="收货人"  />
      <el-table-column prop="productCount" label="商品数量"  />
      <el-table-column prop="totalAmount" label="商品总价"  />
      <el-table-column prop="payAmount" label="实付金额"  />
      <el-table-column prop="payMode" label="结算方式"  align="center"/>
      <el-table-column prop="new_completeTime" label="交易完成时间"  align="center" width="150"/>
    </el-table>
    <pagination
      :total="total"
      v-model:page="searchFrom.pageNum"
      v-model:limit="searchFrom.pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
const { proxy } = getCurrentInstance();

const emits = defineEmits(["handleDialogClose"]);
const props = defineProps({
  tradeInformationOpen: {
    type: Boolean,
    default: false,
  },
  listId: {
    type: Number,
    default: null,
  },
});
const searchFrom = ref({
  pageNum: 1,
  pageSize: 10,
  param: {
    id: "",
  },
});
const tableData = ref([]);
const total = ref(0); //数据总数
watch(
  () => props.tradeInformationOpen,
  () => {
    if (!props.tradeInformationOpen) return;
    searchFrom.value.param.id=props.listId
    getList();
  }
);
const getList = () => {
  product.productcustomer
    .productcustomerRegisteruser({
      data: searchFrom.value,
    })
    .then((res) => {
      total.value=res.total
      if (res.data?.length) {
      res.data = res.data.map((code) => {
        return {
          ...code,
          new_completeTime:proxy.DateTime(code.completeTime),
        };
      });
    }
      tableData.value = res.data;
    });
};

const handleDialogClose = () => {
  emits("handleDialogClose"); // 触发事件通知父组件关闭
};
</script>
<style lang="scss" scoped></style>
